<template>
	<view>
		<view class="plate-list">
			<view class="plate-item" v-for="(item, index) in plate_list" :key="index" @click="to_news_info(item.id)">
				<!-- 左边板块icon 右边 分三行显示 板块名称 评论数量 板块简介 -->
				<view class="plate-icon">
					<u--image :src="item.section_icon" width="70px" height="70px" shape="circle"></u--image>
				</view>
				<view class="plate-info">
					<view class="plate-name">{{ item.section_name }}</view>
					<view class="plate-number">
						<view style="margin-right: 10upx;">帖子总量 {{ item.postnum }}</view>
						<view style="margin-right: 10upx;">浏览总量 {{ item.viewnum }}</view>
						<view>评论总量 {{ item.commentnum }}</view>
					</view>
					<view class="plate-desc">{{ item.section_description }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			plate_list: []
		}
	},
	onLoad() {
		this.get_section_list();
	},
	onShow() {
		this.get_section_list();
	},
	onPullDownRefresh() {
		//调用获取数据方法
		this.get_section_list()
		setTimeout(() => {
			//结束下拉刷新
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		// 获取板块列表
		async get_section_list() {
			let get_section_list = await this.$api.get_section_list({
				limit: 1000,
				page: 1
			});
			if (get_section_list.code == 1) {
				this.plate_list = get_section_list.data.list;
			}
		},
		to_news_info(section_id) {
			uni.navigateTo({
				url: '/pages/news/plate-info?section_id=' + section_id
			})
		}
	}
}
</script>

<style lang="less">
page {
	background-color: #fff;
}

.plate-list {
	padding: 40upx;
	padding-top: 0;

	.plate-item {
		display: flex;
		align-items: center;
		border-bottom: 1upx solid #f8f8f8;
		padding: 20upx 0;

		.plate-icon {
			margin-right: 30upx;
		}

		.plate-info {
			flex: 1;

			.plate-name {
				font-size: 30upx;
				font-weight: bold;
				margin-bottom: 10upx;
			}

			.plate-number {
				display: flex;
				margin-bottom: 10upx;
				font-size: 24upx;
				color: #909399;

				view {
					margin-right: 20upx;
				}
			}

			.plate-desc {
				font-size: 24upx;
				color: #909399;
			}
		}
	}
}
</style>
